@import "./common/mixin.styl"

html,body
  width 100%
  height 100%
  background rgb(252,252,252)
  overflow-x hidden
  .shelf-wrapper
    padding-top computedNum(45)
    .head-wrapper
      position fixed
      top 0
      left 0
      background rgb(252,252,252)
      height computedNum(45)
      z-index 9
      width computedNum(335)
      padding 0 computedNum(20)
      font-size 0
      .back-home
        vertical-align top
        font-size computedNum(16)
        color #666666
        height computedNum(45)
        line-height computedNum(47)
        padding-left computedNum(15)
        background url("../img/back-icon.png") no-repeat left center
        background-size computedNum(8.5) computedNum(15)
        margin-right computedNum(41)
        font-family SimHei
      .tab-wrapper
        font-size computedNum(0)
        height computedNum(45)
        .tab
          font-size computedNum(16)
          color #999999
          height computedNum(45)
          line-height computedNum(45)
          font-family SimHei
          &.active
            color #f14a4a
            .bottom-line
              width 90%
              height computedNum(2)
              background rgb(241,74,74)
              left 5%
              bottom 0
        .track
          margin-left computedNum(25)
      .btn-wrapper
        font-size computedNum(16)
        color #666666
        height computedNum(45)
        line-height computedNum(45)
        margin-left computedNum(58)
        font-family SimHei
        vertical-align top
        .cancel
          display none
    .main-content
      .shelf-content
        padding computedNum(20)
        font-size 0
        .shelf-list
          li
            margin 0 computedNum(17) computedNum(20) 0
            vertical-align top
            position relative
            &:nth-child(3n)
              margin-right computedNum(0)
            div
              width computedNum(100)
              height computedNum(127)
              box-shadow 1px 1px 10px 1px #ccc
            p
              font-size computedNum(13)
              margin-top computedNum(10)
              width computedNum(100)
              overflow hidden
              text-overflow ellipsis
              display -webkit-box
              -webkit-box-orient vertical
              -webkit-line-clamp 2
            .select-box
              width computedNum(22)
              height computedNum(22)
              right computedNum(-5)
              top computedNum(-5)
              background url("../img/not-selected-icon.png") no-repeat center center
              background-size computedNum(22) computedNum(22)
              display none
              &.selected
                background url("../img/has-selected-icon.png") no-repeat center center
                background-size computedNum(22) computedNum(22)
        .none-tip
          display none
          .none-tip-wrapper
            height computedNum(100)
            margin-top computedNum(115)
            background url("../img/none-book.png") no-repeat center center
            background-size computedNum(104) computedNum(93)
          .word-tip
            font-size computedNum(15)
            color #666666
            margin-top computedNum(15)
          .go-to-home
            width computedNum(170)
            height computedNum(40)
            background #fe8484
            border-radius computedNum(20)
            font-size computedNum(15)
            font-family SimHei
            color #ffffff
            text-align center
            line-height computedNum(40)
            margin computedNum(54) computedNum(82.5) 0 computedNum(82.5)
      .track-content
        display none
        background rgb(252,252,252)
        .track-list
          padding computedNum(20) computedNum(20) 0 computedNum(20)
          li
            font-size 0
            margin-bottom computedNum(22)
            .track-book-cover
              vertical-align top
              width computedNum(96)
              height computedNum(122)
              box-shadow 1px 1px 10px 1px #ccc
            .track-book-detail
              margin-left computedNum(12)
              width computedNum(227)
              .track-book-name
                font-size computedNum(16)
                margin-bottom computedNum(12)
              .track-book-status
                font-size computedNum(13)
                color #999999
                margin-bottom computedNum(12)
              div
                .track-book-last
                  font-size computedNum(13)
                  color #999999
                  margin-bottom computedNum(12)
                  .last-chapter
                    vertical-align top
                    max-width computedNum(160)
                    overflow hidden
                    white-space nowrap
                    text-overflow ellipsis
                .continue-read
                  color #f86161
                  font-size computedNum(14)
                  padding-right computedNum(15)
                  background url("../img/more-icon.png") no-repeat right center
                  background-size computedNum(6.5) computedNum(11.5)
      .tips-wrapper
        padding-top computedNum(15)
        height computedNum(65)
        background rgb(245,245,245)
        .tip-icon
          height computedNum(21)
          background url("../img/tips-icon.png") no-repeat center center
          background-size computedNum(21) computedNum(21)
        .tip-word
          margin-top computedNum(12)
          color #c2c1c1
          font-size computedNum(13)
    .like-mask-wrapper
      position fixed
      bottom 0
      left 0
      width 100%
      height 100%
      background rgba(0,0,0,0.5)
      z-index 9
      .like-wrapper
        position absolute
        width 100%
        bottom 0
        left 0
        height computedNum(238)
        background #ffffff
        .like-header
          height computedNum(40)
          background #f14a4a
          color #ffffff
          .left-title
            font-size computedNum(13)
            padding-left computedNum(23)
            height computedNum(40)
            line-height computedNum(40)
          .close-wrapper
            width computedNum(60)
            height computedNum(40)
            background url("../img/close-icon.png") no-repeat center center
            background-size computedNum(13.5) computedNum(13.5)
        .like-content
          font-size 0
          padding 0 computedNum(20)
          li
            margin-right computedNum(25)
            margin-top computedNum(23)
            vertical-align top
            &:last-child
              margin-right computedNum(0)
            div
              width computedNum(95)
              height computedNum(120)
              box-shadow 1px 1px 10px 1px #ccc
            p
              font-size computedNum(12)
              margin-top computedNum(10)
              width computedNum(95)
              overflow hidden
              text-overflow ellipsis
              display -webkit-box
              -webkit-box-orient vertical
              -webkit-line-clamp 2
    .select-all-wrapper
      position fixed
      bottom 0
      left 0
      width 100%
      height computedNum(50)
      background #f87e7e
      z-index 9
      color #ffffff
      display none
      div
        width computedNum(85)
        height computedNum(50)
        line-height computedNum(50)
        text-align center
        font-family SimHei
        font-size computedNum(17)
      .not-select-all
        display none